<template>
  <Modal v-model="show" v-bind:title="modalTitle" @on-cancel="handleCancel" :closable="false">
    <div v-show="!edit_flag">
      <div v-show="!create">
        <p class="margin-bottom-20">会议创建成功，现在发布邀请函，让参会者填写信息吧～</p>
      </div>
      <div v-show="create">
        <Form
          ref="inviteForm"
          :model="inviteInfo"
          :label-width="95"
          label-position="right"
          :rules="inviteRules"
        >
          <FormItem label="邀请函名称" prop="invite_name" ref="inviteName">
            <Input v-model.trim="inviteInfo.invite_name" placeholder :maxlength="50"/>
          </FormItem>
          <FormItem label="会议名称" prop="meet_name" ref="meetName">
            <Input v-model.trim="inviteInfo.meet_name" placeholder :maxlength="50" disabled/>
          </FormItem>
          <FormItem label="截止时间" prop="invite_end_time" ref="inviteEndTime">
            <Row>
              <Col span="11">
                <DatePicker type="date" placeholder v-model="inviteInfo.invite_end.date"></DatePicker>
              </Col>
              <Col span="1" style="text-align: center">-</Col>
              <Col span="11">
                <TimePicker
                  type="time"
                  placeholder
                  format="HH:mm"
                  v-model="inviteInfo.invite_end.time"
                ></TimePicker>
              </Col>
            </Row>
          </FormItem>
        </Form>
      </div>
    </div>
    <div slot="footer">
      <Row type="flex" justify="space-between">
        <Row></Row>
        <Row>
          <Button type="text" @click="handleCancel" v-show="!edit_flag">取消</Button>
          <Button type="primary" @click="handleConfirm">确认</Button>
        </Row>
      </Row>
    </div>
    <div v-show="edit_flag" id="canvasdiv">
      <Row type="flex" :gutter="20">
        <Col span="12" class="margin-top-20">
          <Form ref="inviteForm2" :model="inviteInfo" :label-width="80" label-position="right">
            <FormItem label="名称" prop="invite_name" ref="inviteName">
              <Input v-model.trim="inviteInfo.invite_name" placeholder :maxlength="50" disabled/>
            </FormItem>
            <FormItem label="会议" prop="meet_name" ref="meetName">
              <Input v-model.trim="inviteInfo.meet_name" placeholder :maxlength="50" disabled/>
            </FormItem>
            <FormItem label="截止时间" prop="invite_end_time" ref="inviteEndTime">
              <Input v-model.trim="inviteInfo.validate_to" placeholder disabled/>
            </FormItem>
          </Form>
        </Col>
        <Col span="11">
          <canvas id="canvas"></canvas>
        </Col>
      </Row>
      <Form :label-width="80" label-position="right">
        <FormItem label="链接:" prop="url_link" ref="urlLink">
          <Row>
            <Col span="20">
              <Input v-model.trim="url" disabled/>
            </Col>
            <Col>
              <Button type="text" @click="handleCopy">复制</Button>
            </Col>
          </Row>
        </FormItem>
      </Form>
    </div>
  </Modal>
</template>

<script>
import Tool from "@/libs/util";
import ME from "../../../controllers/meeting";
import DateUtils from "../../../../node_modules/iview/src/utils/date";
import QRCode from "qrcode";

export default {
  name: "add-meeting",
  created() {},
  computed: {},
  components: {
    QRCode
  },
  data() {
    return {
      type: "",
      meet_id: "",
      inviteInfo: {
        invite_end: {
          date: "",
          time: ""
        },
        meet_id: "",
        token: "",
        invite_name: "",
        validate_to: "",
        meet_name: ""
      },
      inviteRules: {
        invite_name: [
          {
            required: true,
            trigger: "blur"
          }
        ]
      },
      create: false,
      show: false,
      edit_flag: false,
      modalTitle: "新建邀请函",
      url: ""
    };
  },
  methods: {
    handleCancel() {
      this.show = false;
    },
    checkTimes() {
      this.inviteInfo.validate_to =
        DateUtils.format(this.inviteInfo.invite_end.date, "yyyy-MM-dd") +
        " " +
        DateUtils.format(this.inviteInfo.invite_end.time, "HH:mm:ss");
      return true;
    },
    handleCopy() {
      this.$copyText(this.url).then(
        res => {
          this.$Message.success("复制链接成功！");
        },
        err => {
          this.$Message.error("复制链接失败！");
          console.error(err);
        }
      );
    },
    handleConfirm() {
      if (this.edit_flag) {
        this.show = false;
        return;
      }
      if (!this.create) {
        this.create = true;
        return;
      }
      this.$refs["inviteForm"].validate().then(validate => {
        if (validate && this.checkTimes()) {
          ME.create_invite(
            this.inviteInfo.invite_name,
            this.inviteInfo.meet_id,
            this.inviteInfo.validate_to
          ).then(res => {
            this.$Message.success("创建成功!");
            this.inviteInfo.token = res.data.invite_id;
            this.edit_flag = true;
            this.$emit("updated");
            this.showQrCode();
          });
        } else {
          this.$Message.error("请检查表单");
        }
      });
    },
    showQrCode() {
      let canvas = document.getElementById("canvas");
      let ts =
        DateUtils.parse(
          this.inviteInfo.validate_to,
          "yyyy-MM-dd HH:mm:ss"
        ).getTime() / 1000;

      this.url = "https://welcome.baijiayun.com?token=" + this.inviteInfo.token;

      QRCode.toCanvas(canvas, this.url, function(error) {
        if (error) console.error(error);
        console.log("success!");
      });
    },
    showAsUpdate(row) {
      let invite = row.invites[0];
      if (!invite) return this.showAsAdd(row);

      this.inviteInfo.meet_id = row._id;
      this.inviteInfo.meet_name = row.meet_name; //
      this.inviteInfo.token = invite.invite_id;
      this.inviteInfo.invite_name = invite.invite_name;
      this.inviteInfo.validate_to = invite.validate_to;
      this.inviteInfo.invite_end.date = DateUtils.parse(
        invite.validate_to,
        "yyyy-MM-dd HH:mm:ss"
      );
      this.inviteInfo.invite_end.time = DateUtils.parse(
        invite.validate_to,
        "yyyy-MM-dd HH:mm:ss"
      );

      this.show = true;
      this.create = false;
      this.edit_flag = true;
      this.modalTitle = "请扫描二维码分享邀请函";
      this.showQrCode();
    },
    showAsAdd(meeting) {
      this.inviteInfo.meet_id = meeting.meet_id || meeting._id;
      this.inviteInfo.validate_to = meeting.date_end;
      this.inviteInfo.meet_name = meeting.meet_name;

      this.inviteInfo.invite_end.date = DateUtils.parse(
        meeting.date_end,
        "yyyy-MM-dd HH:mm:ss"
      );
      this.inviteInfo.invite_end.time = DateUtils.parse(
        meeting.date_end,
        "yyyy-MM-dd HH:mm:ss"
      );

      this.show = true;
      this.create = false;
      this.edit_flag = false;
      this.modalTitle = "新建邀请函";
    }
  }
};
</script>